<template>
  <div class="demo-title">tabbar/demo5</div>
  <Tabbar>
    <TabbarItem>
      <template #icon="props">
        <img :src="props.active ? icon.active : icon.unactive" alt="" />
      </template>
    </TabbarItem>
    <TabbarItem>
      <template #icon="props">
        <img :src="props.active ? icon.active : icon.unactive" alt="" />
      </template>
    </TabbarItem>
    <TabbarItem>
      <template #icon="props">
        <img :src="props.active ? icon.active : icon.unactive" alt="" />
      </template>
    </TabbarItem>
  </Tabbar>
</template>

<script lang="ts" setup>
  import { Tabbar, TabbarItem } from '@sscd-mobile/tabbar'
  const icon = {
    active: 'https://img11.360buyimg.com/imagetools/jfs/t1/70423/4/20553/3652/62e74629E23ba550e/aeeed0e3b9f43ae6.png',
    unactive: 'https://img13.360buyimg.com/imagetools/jfs/t1/23319/19/18329/3084/62e7c346E957c54ef/6c3e8a49e52b76f2.png',
  }
</script>

<style lang="less" scoped></style>
